<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" th:src="@{webjars/jquery/3.4.1/dist/jquery.min.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".delete").click(function () {
            var href = this.href;
            $("#f1").attr("action", href).submit();
            return false;
        });
    })
</script>

<style>
    h1 {
        text-align: center;
    }

    table {
        border-collapse: collapse;
        width: 600px;
        margin: 0 auto;
    }

    td, th {
        border: 1px solid darkslategrey;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    tr:nth-child(odd) {
        background-color: lightgrey;
    }

    #p1 {
        width: 600px;
        margin: 0 auto;
        text-align: right;
    }

    #p2 {
        width: 600px;
        margin: 0 auto;
    }

    input[name='name'], input[name='minSal'], input[name='maxSal'] {
        width: 100px;
    }

</style>
<body>
<h1>员工列表</h1>
<form th:action="@{/emp/search}" method="post">
    <p id="p2">
        姓名: <input type="text" name="name">
        工资: <input type="text" name="minSal">-<input type="text" name="maxSal">
        <input type="text" name="pageNum" value="1">-<input type="text" name="pageSize" value="10">
        <button name="b1">查询</button>
    </p>
</form>
<table>
    <p id="p1"><a th:href="@{/emp/view}">新增员工</a></p>
    <tr>
        <th>员工编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>工资</th>
        <th>生日</th>
        <th>职位</th>
        <th>操作</th>
    </tr>
    <tr th:each="emp:${empList}">
        <td th:text="${emp.id}"></td>
        <td th:text="${emp.name}"></td>
        <td>
            <span th:if="${emp.sex eq 'M'}">男</span>
            <span th:if="${emp.sex eq 'F'}">女</span>
            <span th:if="${emp.sex eq 'O'}">妖</span>
        </td>
        <td th:text="${emp.sal}"></td>
        <td th:text="${#dates.format(emp.birthday,'yyyy-MM-dd')}"></td>
        <td th:text="${emp.jobDesc}"></td>
        <td>
            <a th:href="@{|/emp/${emp.id}|}">修改</a>
            <a th:href="@{|/emp/${emp.id}|}" class="delete">删除</a>
        </td>
    </tr>
</table>
<form method="post" id="f1">
    <input type="hidden" name="_method" value="DELETE"/>
</form>
</body>
</html>